<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- 
	介绍：
		自制“用户注册”页面
	要求：
		①整个输入区域居中显示,无论如何手动去缩放屏幕,它始终都居中显示
		②在各个表单控件的右侧显示“错误提示消息”,无论错误提示消息的内容有多长,只能往右侧延伸显示,即错误提示消息的长度无论如何变化,都不能影响到左侧区域的居中效果
	涉及css技术：
		①渐变,背景线性渐变
		②弹性布局,使元素在屏幕正中央居中显示
		③盒子模型,边框盒
		④美化submit、reset类型的<input>元素,需要分别设置鼠标点击前、鼠标经过时、鼠标按下时的样式
 -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<style type="text/css">
	body {
		/* border: 5px solid black; */
		height: 100vh;
		margin: 0px;
		background-image: linear-gradient(130deg, khaki, darkGoldenRod, darkSlateGray, mediumPurple);
		background-attachment: fixed;  /* 设置背景图像固定,从而确保背景图像能完全铺满可视区,不会出现重复背景图像的情况.若不设置该属性,则当旋转<hr>元素为90°时,会导致页面可视区在垂直方向上延伸,最终出现重复背景的现象 */
	}
	
	.user-register {
		/* border: 5px solid navy; */
		box-sizing: border-box;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.user-register > h1 {
		color: white;
	}
	
	.user-register > table {
		border: 0px solid black;
	}
	
	.user-register td {
		border: 0px solid black;
		padding: 2px 0px;
		white-space: nowrap;
		color: white;
	}
	
	.user-register td:first-child {
		text-align: right;
		font-size: medium;
	}
	
	.user-register td:nth-child(2) {
		text-align: left;
	}
	
	.user-register tr:nth-child(5) td:nth-child(2) {
		text-align: center;
	}
	
	.user-register td:only-child {
		text-align: center;
	}
	
	.user-register i {
		display: block;  /* 设置为块级元素,从而可以设置宽度 */
		width: 0px;      /* 设置宽度为0,从而该元素内的文本会溢出该元素显示,但不会撑开该元素,从而就不会影响到该元素的父元素,那么该元素的父元素的宽度就不会受到影响 */
		border: none;
		color: yellow;
		font-size: xx-small;
	}
	
	.user-register input[type="text"], 
	.user-register input[type="password"], 
	.user-register input[type="number"], 
	.user-register input[type="date"], 
	.user-register input[type="email"] {
		width: 300px;
		height: 30px;
		background-color: ghostWhite;
		border: 1px solid silver;
		border-radius: 8px 8px;
	}
	
	.user-register input[type="radio"] {
		width: 20px;
		height: 20px;
		vertical-align: bottom;
		cursor: pointer;
	}
	
	.user-register input[type="submit"], 
	.user-register input[type="reset"] {
		padding: 5px 20px;
		background-color: crimson;
		color: white;
		cursor: pointer;
		border-style: outset;
		border-width: 1px;
		border-color: ivory;
		border-radius: 5px 5px;
	}
	
	.user-register input[type="submit"]:hover, 
	.user-register input[type="reset"]:hover {
		background-color: purple;
	}
	
	.user-register input[type="submit"]:active, 
	.user-register input[type="reset"]:active {
		background-color: orange;
		border-style: inset;
	}
	
	.user-register a {
		padding: 15px;
		color: white;
	}
</style>
</head>
<body>
	
	
	
	<form class="user-register" action="${pageContext.request.contextPath}/RegisterServlet/signup">
		<h1>用户注册</h1>
		<table>
			<tr>
				<td>账号：</td>
				<td><input type="text" name="account" value="${param.account}" autocomplete="off" required="required"/></td>
				<td><i>${requestScope.account}</i></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password" value="${param.password}" required="required"/></td>
			</tr>
			<tr>
				<td>确认密码：</td>
				<td><input type="password" name="cfmpwd" value="${param.cfmpwd}"  required="required"/></td>
				<td><i>${requestScope.cfmpwd}</i></td>
			</tr>
			<tr>
				<td>姓名：</td>
				<td><input type="text" name="name" autocomplete="off" value="${param.name}" required="required"/></td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
					<input type="radio" name="gender" value="男" required="required" checked="checked"/>男　
					<input type="radio" name="gender" value="女" required="required"/>女
				</td>
			</tr>
			<tr>
				<td colspan="2">　　
					<input type="submit" value="注册"/>　
					<input type="reset" value="重置"/>
				</td>
			</tr>
		</table>
		<a href="${pageContext.request.contextPath}/user-login.jsp">已有账号？去登陆</a>
	</form>
	
	
	
	<!-- 以下代码可以随时删除 -->
	<!-- <hr style="transform: rotate(90deg);"> -->
	
	<jsp:include page="/msg.jsp"/>
</body>
</html>